<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="root">
    <h1 id="title">标题标签:{{msg}}</h1>
    <button @click="msg='测试测试'">点击</button>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let root= new Vue({
        el:"#root",
        data:{
          msg:"哎呦喂"
        },
        beforeCreate(){
        //    VUe实例创建之前触发,此时无法获取data数据,DOM结构还未真正创建完毕
            console.log("beforeCrete",this.msg,title)
        },
        created(){
        //    Vue实例创建完毕之后触发,此时可以获取data数据,DOM还未真正创建完毕
            console.log("created",this.msg,title)
        },
        beforeMount(){
        //    vue实例挂载之前触发,此时可以获取data数据,DOM还未真正创建完成
            console.log("beforeMount",this.msg,title)
        },
        mounted(){
        //    vue实例挂在完毕之后触发,此时可以获取data数据,DOM真正创建完毕了
            console.log("mounted",this.msg,title)

        },
        beforeUpdate(){
        //    data数据已经修改,但是页面还未更新
            console.log("beforeUpdate",this.msg,title,title.innerHTML)

        },
        updated(){
        //    data数据已经修改,而且页面也更新完毕
            console.log("Updated",this.msg,title.innerHTML)

        },
        beforeDestroy(){
        //    vue实例销毁之前,我们一般会在次做一些数据的保存,缓存的清理,解除绑定事件监听,销毁计时器等善后工作
            console.log("beforeDestroy触发了!! 将要销毁")
        },
        destroyed(){
        //    vue实例已经被销毁,该函数调用之后当vue实例所有指令被解绑,所有监听被清除,所有子实例也会被销毁
            console.log("destroyed触发了!! 销毁l")
        }



    });
    setTimeout(function () {
root.$destroy();
    },3000)
</script>
